<template>
  <detailbox title="升版" @leftclick="close">
    <div slot="right" class="flex_end"><el-button type="primary" size="small" @click="submit()">预览并提交</el-button></div>
    <el-row class="mt10">
      <el-col :span="18">
        <basic-container>
          <div class="main_title success_f"><b>文件信息</b></div>
          <el-divider></el-divider>
          <div>
            <div class="mb20">
              <span class="index_num success_bg">1</span>
              <b class="f14">文件属性</b>
              <el-popover placement="top-start" title="" width="200" trigger="hover">
                <div>文件属性的数据与上传的文件封面的数据相同</div>
                <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
              </el-popover>
            </div>
            <table class="table1 owntable mb20 tableLayout" border="0" cellspacing="0" cellpadding="1" style="width: 100%">
              <tr>
                <td width="100">文件名称</td>
                <td>{{ detail.name }}</td>
                <td width="100">文件编号</td>
                <td>{{ detail.fileNumber }}</td>
                <td width="100">文件控制状态</td>
                <td>{{ detail.controlStatus == '0' ? '受控' : '非受控' }}</td>
              </tr>
              <tr>
                <td>内部/外来文件</td>
                <td>{{ detail.fileSource == '0' ? '内部文件' : '外来文件' }}</td>
                <td>编制部门</td>
                <td colspan="3">{{ detail.createDeptName }}</td>
              </tr>
            </table>

            <el-row>
              <el-form size="small">
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="文件版本号:" required>
                      <el-input class="ml10 w120" v-model="versionNumber" readonly placeholder="数据带入" v-if="detail.versionNumberType == 0"></el-input>
                      <el-input class="ml10 w120" v-model="versionNumber" placeholder="请输入" v-if="detail.versionNumberType == 1"></el-input>
                      <span class="gray_f f12 ml10">上一版本的文件版本号:{{ detail.versionNumber }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="升版原因:" required>
                      <el-input v-model="reason" placeholder="输入升版原因" style="width: 480px"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="页码数量：" required>
                      <el-input v-model="detail.pageCount" placeholder="请输入" class="w160"></el-input>
                      <el-popover placement="top-start" title="" width="220" trigger="hover">
                        <div>按照封面是第一页顺序编制其它页码</div>
                        <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
                      </el-popover>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-row>
          </div>
          <div>
            <div class="mb10">
              <span class="index_num success_bg">2</span>
              <b class="f14">文件</b>
              <i class="red_f">*</i>
            </div>
            <div class="flex_start mb20">
              <template v-if="detail.isSystemTemplate == 0">
                <el-button type="primary" plain size="small" @click="upload(detail, 0)">上传本地文件</el-button>
                <span class="gray_f f12 ml10">仅限上传word/excel格式文件</span>
              </template>
              <el-checkbox class="ml10" :value="detail.isSystemCover == 1 ? true : false" label="使用系统生成的封面" border @change="isSystemCoverChange($event, detail)"></el-checkbox>
              <div class="f12 error_f flex_start ml10" v-if="detail.isSystemCover == 1">
                <i class="el-icon-warning-outline error_f f14"></i>
                请删除文件自带的封面(若有)，且按照系统生成的封面是第1页的顺序编制其他页码
              </div>
            </div>
            <div class="flex_row">
              <table class="owntable mb20" style="width: 100%">
                <tr>
                  <th class="pub_left">
                    文件
                    <span v-if="detail.templateFile">- {{ detail.isSystemTemplate == 1 ? '上一版本使用文件模板' : '上一版本使用上传文件' }}</span>
                  </th>
                </tr>
                <tr v-if="detail.templateFile">
                  <td class="white_bg">
                    <div class="flex_between">
                      <div class="main_co pointer" @click="fileTempleteEdit(detail)">{{ detail.originalName }}</div>
                      <div class="flex_between">
                        <!-- <span class="ml10 gray_f">2021-09-27 15:29 编辑</span> -->
                        <el-button plain size="mini" class="ml10" @click="getFileCover(item, 'systemguifanfilesprocess')" v-if="detail.isSystemCover == 1"> 封面预览 </el-button>
                        <i class="el-icon-delete f16 error_f ml10 pointer" @click="delFileTemplete(detail, 1)" v-if="detail.isSystemTemplate == 0"></i>
                      </div>
                    </div>
                  </td>
                </tr>
                <tr v-else>
                  <td class="white_bg"><div class="gray_f">文件显示在此处</div></td>
                </tr>
              </table>
              <div class="preview" v-if="detail.isSystemCover == 0">
                <div class="flex_between mb10">
                  <div class="f14"><b>封面示例</b></div>
                  <!-- <el-button size="mini" @click="showpreview = true" class="iconfont icon-quanping" style="padding: 4px;"></el-button> -->
                </div>
                <div class="white_bg tem"><img :src="serviceUrl + '/wenjian/shilietu.jpg'" style="width: 100%" /></div>
              </div>
            </div>
          </div>
        </basic-container>
      </el-col>
      <el-col :span="6"><file-creat-flow ref="creatFlow"></file-creat-flow></el-col>
    </el-row>
    <steps ref="steps" @close="success()" :nowdate="nowdate"></steps>
    <confirm ref="confirm" @close="save()" type="1" :guifanFilesProcessRecordList="guifanFilesProcessRecordList" :systemGuifanFilesProcessList="systemGuifanFilesProcessList"></confirm>
    <showhistory ref="showhistory" type="2"></showhistory>
    <el-dialog title="附件管理" append-to-body :visible.sync="attachBox" width="555px">
      <avue-form ref="form" :option="attachOption" :upload-preview="uploadPreview" :upload-before="uploadBefore" v-model="attachForm" :upload-after="uploadAfterdetails"></avue-form>
    </el-dialog>
    <pdf :pdfUrl="src" ref="pdf"></pdf>
  </detailbox>
</template>

<script>
import confirm from './confirm.vue'
import { saveUpgrade, updateUpgrade, getguifanDetail } from '@/api/myapi/tixiwenjian'
import fileMinixs from '@/mixins/file.js'
import fileCreatFlow from '@/components/file-creat-flow/index.vue'
import pdf from '@/components/pdf/index.vue'
export default {
  props: {
    detailId: '',
  },
  components: {
    confirm,
    fileCreatFlow,
    pdf,
  },
  mixins: [fileMinixs],
  data() {
    return {
      system: 'systemguifanfilesprocess',
      showpreview: false,
      formList: [],
      guifanFilesProcessRecordList: [],
      systemGuifanFilesProcessList: [],
      versionNumber: '',
      reason: '',
      detail: {},
    }
  },
  mounted() {
    if (this.detailId) {
      this.getDetail()
    }
    this.getdeptlist()
    this.getAlluser()
  },
  methods: {
    close() {
      this.$emit('close')
    },
    getDetail() {
      getguifanDetail(
        {
          id: this.detailId,
          // isUpgrade:1
        },
        this.system
      ).then(({ data }) => {
        if (data.success) {
          data.data.beginTime = ''
          if (data.data.processStatus != 7) {
            this.reason = this.detail.reason
            this.versionNumber = this.detail.versionNumber
          } else {
            if (data.data.versionNumberType == 0) {
              this.versionNumber = data.data.nextVersionNumber
            }
          }
          this.detail = data.data
        }
      })
    },
    // 提交
    submit() {
      let systemGuifanFilesProcessList = []
      this.formList = [this.detail]
      let guifanFilesProcessRecordList = this.$refs.creatFlow.guifanFilesProcessRecordList
      let isOnlineReview = this.$refs.creatFlow.isOnlineReview
      for (let i = 0; i <= guifanFilesProcessRecordList.length - 1; i++) {
        let item = guifanFilesProcessRecordList[i]
        item.sort = i
        if (item.type == 1 && !item.userId) {
          this.$message.error('请选择审核人员')
          return
        }
        if (item.type == 4 && !item.userId) {
          this.$message.error('请选择批准人员')
          return
        }
        if (isOnlineReview && item.type == 2 && !item.userId) {
          this.$message.error('请选择评审人员')
          return
        }
      }
      if (!this.formList.length) {
        this.$message.error('请添加文件')
        return
      }
      for (let i = 0; i < this.formList.length; i++) {
        let item = this.formList[i]
        let arr = [
          {
            value: this.versionNumber,
            tips: '请输入文件版本号',
          },
          {
            value: this.reason,
            tips: '请输入升版原因',
          },
        ]
        for (let j = 0; j < arr.length; j++) {
          if (!arr[j].value) {
            this.$message.error(arr[j].tips)
            return
          }
        }
        systemGuifanFilesProcessList.push({
          ...item,
          versionNumber: this.versionNumber,
          processRecordList: guifanFilesProcessRecordList,
          isUpgrade: 1,
          isOnlineReview: isOnlineReview ? 1 : 0,
          templateCover: '',
          reason: this.reason,
        })
      }
      this.systemGuifanFilesProcessList = systemGuifanFilesProcessList
      this.guifanFilesProcessRecordList = guifanFilesProcessRecordList
      this.openDialg('confirm')
    },
    // 保存
    save() {
      if (this.detail.processStatus && this.detail.processStatus != 7) {
        updateUpgrade(this.systemGuifanFilesProcessList, this.system).then(({ data }) => {
          if (data.success) {
            this.$message.success('提交成功')
            this.openDialg('steps')
          }
        })
      } else {
        saveUpgrade(this.systemGuifanFilesProcessList, this.system).then(({ data }) => {
          if (data.success) {
            this.$message.success('提交成功')
            this.openDialg('steps')
          }
        })
      }
    },
    success() {
      this.$emit('success')
    },
  },
}
</script>

<style scoped="scoped" lang="scss">
.btnbox {
  border: 1px solid #a3cffd;
  opacity: 1;
  border-radius: 3px 0px 0px 3px;
}

.btnleft {
  padding: 0 10px;
}

.btnright {
  border-left: 1px solid #a3cffd;
  padding: 0 10px;
  line-height: 32px;
}

.border {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  line-height: 32px;
  padding: 0 10px;
}

.preview {
  padding: 10px;
  background-color: #f0f2f5;
  // margin-top: 20px;
  margin-left: 10px;
}

.preview .warn_f {
  background-color: #fbf4e0;
  border: 1px solid #f3dea4;
  line-height: 20px;
  padding: 0 4px;
  margin: 20px 0 10px;
}

.preview .tem {
  width: 377px;
  height: 512px;
}

.preview.bigpreview {
  background-color: #ffffff;
}

.preview.bigpreview .tem {
  width: 510px;
  height: 693px;
}

.error {
  background-color: #fceeec;
  border: 1px solid #f9dcd9;
  padding: 6px 10px;
  border-radius: 2px;
}

/deep/ .el-checkbox.is-bordered {
  height: 32px;
  padding: 5px 10px;
}

.tabledata {
  padding: 0 10px 10px;

  .addbtn {
    padding-top: 10px;
  }
}
</style>
